

    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #808080;
    }

    li {
        list-style: none;
    }

    #app {
        margin: 150px auto;
        width: 1000px;
        height: 700px;
    }

    #app .navbar {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        background-color: #1eadda;
        color: #fff;
        height: 10%;
    }

    #app .navbar .navbarHeadLine {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 30px;
        height: 100%;
    }

    #app .navbar .searchbox {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 52%;
        height: 100%;
    }

    #app .navbar .searchbox .search {
        height: 50%;
        width: 330px;
        border: none;
        font-size: 18px;
        outline: none;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.6);
    }

    #app .navbar .searchbox .shelterlayer {
        float: left;
        position: relative;
        left: 320px;
        height: 60%;
        width: 26px;
        background-color: rgba(255, 255, 255, 0);
        z-index: 2;
    }

    #app .navbar .searchbox .fa-search {
        float: left;
        position: relative;
        left: 340px;
        color: #93a3a4;
        z-index: 3;
    }

    #app .mainContent {
        height: 80%;
        background-color: #fff;
    }

    #app .mainContent .musicListBox {
        float: left;
        width: 20%;
        height: 100%;
    }

    #app .mainContent .musicListBox .musicList {
        width: 100%;
        height: inherit;
    }

    #app .mainContent .musicListBox .musicList li {
        height: 10%;
        width: inherit;
    }

    #app .mainContent .musicListBox .musicList li .musicblock {
        display: flex;
        align-items: center;
        height: 100%;
        width: inherit;
        text-align: center;
        position: relative;
    }

    #app .mainContent .musicListBox .musicList li .musicblock .fa-play-circle-o {
        margin-left: 10px;
        cursor: pointer;
    }

    #app .mainContent .musicListBox .musicList li .musicblock span {
        margin-left: 10px;
        font-size: 14px;
        cursor: pointer;
    }

    #app .mainContent .musicListBox .musicList li .musicblock .fa-youtube-play {
        position: absolute;
        right: 0;
        cursor: pointer;
    }

    #app .mainContent .content {
        float: left;
        width: 60%;
        height: 100%;
    }

    #app .mainContent .commentBox {
        float: left;
        width: 20%;
        height: 100%;
    }

    #app .musicPlayer {
        width: 100%;
    }

    #app .musicPlayer .controller {
        width: inherit;
    }